<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: auto;height:400px;"></div>
	<!-- 引入 echarts.js -->
	<script src="/admin/lib/echarts/echarts-bar.js"></script>
	<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script> 
	<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend: {
				data: ['试验总量', '不合格数量']
			},
			color:[
				'#3398DB','#c23531','#2f4554', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'
			],
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				show: false
			},
			yAxis: {
				type: 'category',
				show: true,
				// boundaryGap: false,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: true,
					fontSize: 16,
					color: '#1A73E8',
					fontWeight: 'bold'
				},
				data: ['绝缘靴', '绝缘手套', '绝缘斗臂车', '绝缘安全帽', '绝缘服', '遮蔽罩', '绝缘毯']
			},
			series: [
				{
					name: '试验总量',
					type: 'bar',
					// stack: '总量',
					barWidth : 30,//柱图宽度
					// barGap : '-30%',
					label: {
						show: true,
						position: 'insideRight'
					},
					data: [20, 60, 30, 49, 7, 78, 68]
				},
				{
					name: '不合格数量',
					type: 'bar',
					// stack: '总量',
					barWidth : 26,//柱图宽度
					barGap : '-94%',
					// barMaxWidth: 30,
					// barMinWidth: 30,
					// barCategoryGap : '1%',
					label: {
						show: true,
						position: 'insideRight'
					},
					data: [16, 12, 8, 20, 5, 9, 1]
				}
			]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

		/* myChart.showLoading();
		
		setInterval(fun,3000);
		fun(); */

		function fun() {
			// 异步加载数据
			$.get('http://hb.hbjc2018.cn/api/hbjc/myApi/getTemp').done(function (data) {
				myChart.hideLoading();
				// 填入数据
				myChart.setOption({
					xAxis: {
						data: data.time
					},
					series: [{
						// 根据名字对应到相应的系列
						name: '销量',
						data: data.temp
					}]
				});
			});
		}
		
		window.addEventListener("resize",function (){
			myChart.resize();
		});
    </script>
</body>
</html>